import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';

import { getImgUrl, getCarRegisterDate, getMileFormat, getPriceFormat, getStoreStatus, getSaleStatus, getCheckStatus, getPurchaseType } from '../../../utils/ComFunction';


export default class CarInfoBox extends Component {

    render() {
        const  item  = this.props.carInfo ? this.props.carInfo : {};
        return (
            <View style={styles.container}>
                <Image style={styles.carImg} source={{ uri: getImgUrl(item ? item.mainPic : '') }}/>
                <View style={styles.carInfoBox}>
                    <Text style={styles.brandText}>{item.seriesName + ' ' + item.speciesName}</Text>
                    <Text style={styles.carInfoText}>{this.getSubCarInfo(item)}</Text>
                    <Text style={styles.carPriceText}>{this.props.quotationPrice && this.props.quotationPrice != 0 ? '收购价 '+this.props.quotationPrice/(10000*100)+'万元' : '挂牌价 '+getPriceFormat(item.listPrice)}</Text>
                </View>
            </View>
        )
    }

    getSubCarInfo(item) {

        let carInfoStr = ''
        if (item.registerDate && item.registerDate != null) {
            carInfoStr = getCarRegisterDate(item.registerDate)
        }

        if (item.mileage && item.mileage != 0) {
            carInfoStr = carInfoStr + ' | ' + getMileFormat(item.mileage)
        }

        if (item.cityName && item.cityName != '') {
            if (carInfoStr != '') {
                carInfoStr = carInfoStr + ' | ' + item.cityName
            } else {
                carInfoStr = item.cityName
            }

        }

        return carInfoStr
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        width: '100%',
        height: 114,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingHorizontal: 16,
        paddingVertical: 12
    },
    carImg: {
        width: 130,
        height: 90,
        borderRadius: 4,
        backgroundColor: '#f5f5f5'
    },
    carInfoBox: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        marginLeft: 12
    },
    brandText: {
        lineHeight: 20,
        color: '#333333',
        fontSize: 14,
        fontWeight: '500'
    },
    carInfoText: {
        marginTop: 4,
        fontSize: 12,
        color: '#333'
    },
    carPriceText: {
        marginTop: 8,
        fontSize: 14,
        color: '#333333'
    }
    
})